<template>
  <div id="map" class="map" ref="rootmap"></div>
</template>

<script>
import 'ol/ol.css';
import TileLayer from 'ol/layer/Tile';
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import { boundingExtent, getCenter } from 'ol/extent';
import 'ol/ol.css';
import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import GeoJSON from 'ol/format/GeoJSON';

let map = null;
// const image = new CircleStyle({
//   radius: 5,
//   fill: null,
//   stroke: new Stroke({ color: 'red', width: 1 }),
// });

const PointSstyles = new Style({
  image: new Icon({
    src: './olImages/chongqing.png',
  }),
});
const geojsonObject = {
  type: 'FeatureCollection',
  crs: {
    type: 'name',
    properties: {
      name: 'EPSG:3857',
    },
  },
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [120, 30],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [121, 31],
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [119, 30],
      },
    },
  ],
};
const vectorSource = new VectorSource({
  features: new GeoJSON().readFeatures(geojsonObject),
});
const pointVecLayer = new VectorLayer({
  source: vectorSource,
  style: PointSstyles,
});
pointVecLayer.name = 'point001';
export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
    this.addPointEvent();
  },
  methods: {
    initMap() {
      map = new Map({
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'http://t6.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=2d8eca459ee67a4b8d1f281791d4f09f',
            }),
          }),
          pointVecLayer,
        ],
        logo: {
          src: './olImages/chongqing.png',
          href: 'http://www.openstreetmap.org/',
        },
        target: 'map',
        view: new View({
          center: [120, 30],
          zoom: 6,
          projection: 'EPSG:4326',
        }),
      });
      // const url = 'http://8.136.236.190:30000/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=zhejiang:tb_cereal_2021&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}';

      // var mapExtent = map.getView().calculateExtent(map.getSize());
      // var point = getCenter(mapExtent);
      // debugger;
      // setTimeout(() => {
      //   map.getView().setCenter(point); //设置当前地图的显示中心位置
      // }, 100);
    },
    addPointEvent() {
      map.addLayerEvent({
        map,
        layerName: 'point001',
        listener: function (e) {
          console.log(e.coordinate);
        },
      });
    },
  },
};
</script>

<style></style>
